<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 学习 1-2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>Message:{{ msg }}</p>
        <p v-once>Message:{{ msg }}</p>
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        <h2>使用JavaScript表达式</h2>
        <p>{{ number + 1 }}</p>
        <p>{{ ok ? 'YES' : 'NO' }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
        <div v-bind:id="'list-' + id"></div>
        <h2>指令</h2>
        <p v-if='seen'>现在你看到我了</p>
        <a :href="url" target="_blank">这里是网址</a>
        <a @click="doSomething">点击将会被监听</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "Message",
            rawHtml: "<b>这是HTML，使用了v-html指令</b>",
            number: 1,
            ok: true,
            message: "这是要取反",
            id: 6,
            seen: true,
            url: "http://www.lhbbk.com"
        },
        methods: {
            doSomething: function (event) {
                alert("你点击了我")
            }
        }
    })

</script>

</html>